<template>
    <div>
        <div class="bos1">
            <div class="bos_1">
                <i>
                    <p style="margin-left: 20px; color:#25396f; font-size: 17px;  line-height: 43px;">热门科室</p>
                </i>
            </div>
            <div class="bos_2">
                <span class="span1">头像</span>
                <span class="span1">科室</span>
                <span class="span1">挂号量</span>
            </div>

            <div class="bos_3">
                <img src="./imgs/log11.webp" alt="">
                <p class="p1">肾内科</p>
                <p class="p2">888</p>
            </div>
            <div class="bos_3">
                <img src="./imgs/log11.webp" alt="">
                <p class="p1">眼科</p>
                <p class="p2">633</p>
            </div>
            <div class="bos_3">
                <img src="./imgs/log11.webp" alt="">
                <p class="p1">内科</p>
                <p class="p2">56</p>
            </div>
            <div class="bos_3">
                <img src="./imgs/log11.webp" alt="">
                <p class="p1">儿诊</p>
                <p class="p2">123</p>
            </div>
            <div class="bos_3">
                <img src="./imgs/log11.webp" alt="">
                <p class="p1"> 网瘾科</p>
                <p class="p2">99</p>
            </div>


        </div>
    </div>

</template>

<script>

export default {

}
</script>

<style lang="less" scoped>
.bos1 {
    width: 300px;
    height: 380px;
    background: #ffffff;
    border-radius: 7px;
    margin-left: 20px;
    overflow: hidden;
    
    box-sizing: border-box;

    .bos_1 {
        width: 100%;
        height: 50px;
    }

    .bos_2 {
        display: flex;
        justify-content: space-around;

        .span1 {
            display: block;
            color: #25396f;
            font-size: 15px;


        }
    }

    .bos_3 {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 15px;
        color: darkgray;
        // margin-top: 20px;
        
        .p1{
            line-height: 30px;
        }
        .p2{
            line-height: 30px;
            margin-right: 7px;
        }
    }

    .bos_3:hover{
        background: #f2f7ff;
    }

    img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-left: 3px;
        
    }
}
</style>